<template>
	<view class="content flexc justify-center">
		<view class="card flexc align-center">
			<image class="user" src="@/static/applogo.png"></image>
			<text class="name text-color1">只记今朝笑</text>
			<w-barcode class="barcode" :options="baroptions"></w-barcode>
			<view class="barcode-text text-color5">
				hls99 **** **** **** **** 查看数字
			</view>
			<w-qrcode class="qrcode" :options="qroptions"></w-qrcode>
			<view class="qrcode-desc text-color5 flexr align-center">
				<image class="refresh" src="@/static/refresh.png"></image>
				会员码每30秒自动更新，请在店内消费时使用
			</view>
			<view class="flex-1"></view>
			<view class="datas flex-1 flexr align-center justify-spacebwt">
				<view class="flexc align-center flex-1">
					<view class="number">260</view>
					<view class="label">余额</view>
				</view>
				<view class="flexc align-center flex-1">
					<view class="number">386</view>
					<view class="label">积分</view>
				</view>
				<view class="flexc align-center flex-1">
					<view class="number">5</view>
					<view class="label">优惠券</view>
				</view>
				<view class="flexc align-center flex-1">
					<view class="number">3</view>
					<view class="label">消费次卡</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
const baroptions = ref({
	width: 650,
	height: 112,
	code: 'E57890543271985',
})
const qroptions = ref({
	code: 'https://qm.qq.com/cgi-bin/qm/qr?k=LKqML292dD2WvwQfAJXBUmvgbiB_TZWF&noverify=0',// 生成二维码的值
	size: 390,
})
</script>

<style lang="scss">
.content {
	background-color: #156557;
	.card {
		background-color: white;
		height: 1050rpx;
		min-height: 1050rpx;
		margin: 32rpx;
		border-radius: 32rpx;
		.user {
			box-sizing: border-box;
			width: 150rpx;
			height: 150rpx;
			border: 4rpx solid white;
			border-radius: 75rpx;
			margin-top: -75rpx;
		}
		.name {
			margin-top: 10rpx;
		}
		.barcode {
			margin-top: 43rpx;
		}
		.barcode-text {
			font-size: 22rpx;
			margin-top: 20rpx;
		}
		.qrcode {
			margin-top: 60rpx;
		}
		.qrcode-desc {
			font-size: 22rpx;
			margin-top: 20rpx;
			.refresh {
				width: 40rpx;
				height: 45rpx;
				padding: 10rpx;
				box-sizing: border-box;
				margin-right: 10rpx;
			}
		}
		.datas {
			height: 187rpx;
			min-height: 187rpx;
			align-self: stretch;
			// background-color: red;
			border-top: 2rpx dashed $divider-color;
			padding: 0 48rpx;
			.number {
				font-size: 48rpx;
				color: #36BBA5;
			}
			.label {
				margin-top: 15rpx;
				color: $text-color2;
				font-size: 28rpx;
			}
		}
	}
}
</style>
